<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动化脚本平台 - 设备管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f8 100%);
            color: #2d3436;
            line-height: 1.6;
            padding: 2rem;
            min-height: 100vh;
        }

        /* 导航栏样式 */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            padding: 1rem 2rem;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-logo {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .nav-link {
            color: #64748b;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }

        .nav-link:hover {
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }

        .nav-link.active {
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }

        /* 调整主容器上边距以适应固定导航栏 */
        .container {
            margin-top: 5rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 24px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            backdrop-filter: blur(10px);
        }

        .page-title {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 2.5rem;
            text-align: center;
            letter-spacing: -1px;
        }

        .devices-section {
            margin-bottom: 4rem;
        }

        .section-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #334155;
            margin-bottom: 2rem;
            padding-bottom: 0.5rem;
            border-bottom: 3px solid #e2e8f0;
        }

        .devices-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .device-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(0,0,0,0.05);
        }

        .device-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 12px 32px rgba(0,0,0,0.12);
        }

        .device-name {
            font-size: 1.4rem;
            font-weight: 700;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem;
        }

        .device-status {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .device-status::before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-online {
            background: #ecfdf5;
            color: #065f46;
        }

        .status-online::before {
            background: #059669;
            box-shadow: 0 0 0 2px #a7f3d0;
        }

        .status-offline {
            background: #fef2f2;
            color: #991b1b;
        }

        .status-offline::before {
            background: #dc2626;
            box-shadow: 0 0 0 2px #fecaca;
        }

        .status-unpaired {
            background: #fffbeb;
            color: #92400e;
        }

        .status-unpaired::before {
            background: #d97706;
            box-shadow: 0 0 0 2px #fde68a;
        }

        .device-info {
            margin-bottom: 1.5rem;
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.8;
        }

        .device-actions {
            display: flex;
            gap: 1rem;
        }

        .action-btn {
            flex: 1;
            padding: 0.75rem 1rem;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(37,99,235,0.2);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(37,99,235,0.3);
        }

        .btn-danger {
            background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(220,38,38,0.2);
        }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(220,38,38,0.3);
        }

        .btn-pair {
            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(245,158,11,0.2);
        }

        .btn-pair:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(245,158,11,0.3);
        }

        .add-device {
            position: fixed;
            bottom: 2.5rem;
            right: 2.5rem;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: white;
            border: none;
            font-size: 2.2rem;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(37,99,235,0.4);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .add-device:hover {
            transform: scale(1.1) rotate(180deg);
            box-shadow: 0 8px 28px rgba(37,99,235,0.5);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
        }

        .modal-content {
            background: white;
            padding: 3rem;
            border-radius: 24px;
            width: 90%;
            max-width: 520px;
            box-shadow: 0 24px 48px rgba(0,0,0,0.2);
            transform: translateY(20px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-title {
            font-size: 2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 2rem;
            text-align: center;
        }

        .qr-container {
            text-align: center;
            margin: 2rem 0;
        }

        .qr-code {
            width: 240px;
            height: 240px;
            margin: 0 auto;
            background: #f8fafc;
            border-radius: 12px;
            padding: 1.2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .qr-tip {
            margin-top: 1.5rem;
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .modal-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 3rem;
        }

        /* 删除确认弹框样式 */
        .confirm-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
        }

        .confirm-content {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            width: 90%;
            max-width: 400px;
            text-align: center;
        }

        .confirm-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #dc2626;
        }

        .confirm-message {
            color: #64748b;
            margin-bottom: 2rem;
        }

        .confirm-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        .confirm-btn {
            padding: 0.75rem 2rem;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .confirm-cancel {
            background: #e5e7eb;
            color: #4b5563;
        }

        .confirm-delete {
            background: #dc2626;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="nav">
        <div class="nav-logo">自动化脚本平台</div>
        <div class="nav-links">
            <a href="/dashboard" class="nav-link">仪表盘</a>
            <a href="/devices" class="nav-link active">设备管理</a>
            <a href="/scripts" class="nav-link">脚本管理</a>
            <a href="/tasks" class="nav-link">任务管理</a>
            <a href="/settings" class="nav-link">系统设置</a>
        </div>
    </nav>

    <div class="container">
        <h1 class="page-title">设备管理中心</h1>
        
        <!-- 已配对设备 -->
        <div class="devices-section">
            <h2 class="section-title">已配对设备</h2>
            <div class="devices-grid">
                <div class="device-card">
                    <h3 class="device-name">Windows工作站</h3>
                    <span class="device-status status-online">在线</span>
                    <div class="device-info">
                        <p>设备ID: DEV-001</p>
                        <p>最后在线: 刚刚</p>
                    </div>
                    <div class="device-actions">
                        <button class="action-btn btn-primary" onclick="controlDevice(1)">
                            <i class="fas fa-desktop"></i>
                            远程控制
                        </button>
                        <button class="action-btn btn-danger" onclick="showDeleteConfirm(1, 'Windows工作站')">
                            <i class="fas fa-trash"></i>
                            删除设备
                        </button>
                    </div>
                </div>

                <div class="device-card">
                    <h3 class="device-name">Linux服务器</h3>
                    <span class="device-status status-offline">离线</span>
                    <div class="device-info">
                        <p>设备ID: DEV-002</p>
                        <p>最后在线: 2小时前</p>
                    </div>
                    <div class="device-actions">
                        <button class="action-btn btn-primary" onclick="controlDevice(2)">
                            <i class="fas fa-desktop"></i>
                            远程控制
                        </button>
                        <button class="action-btn btn-danger" onclick="showDeleteConfirm(2, 'Linux服务器')">
                            <i class="fas fa-trash"></i>
                            删除设备
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 未配对设备 -->
        <div class="devices-section">
            <h2 class="section-title">待配对设备</h2>
            <div class="devices-grid">
                <div class="device-card">
                    <h3 class="device-name">新发现设备</h3>
                    <span class="device-status status-unpaired">未配对</span>
                    <div class="device-info">
                        <p>设备ID: DEV-003</p>
                        <p>最后在线: 1分钟前</p>
                    </div>
                    <div class="device-actions">
                        <button class="action-btn btn-pair" onclick="pairDevice(3)">
                            <i class="fas fa-link"></i>
                            配对设备
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <button class="add-device" onclick="showAddDeviceModal()">+</button>
    </div>

    <!-- 添加新设备弹窗 -->
    <div id="addDeviceModal" class="modal">
        <div class="modal-content">
            <h2 class="modal-title">添加新设备</h2>
            <div class="qr-container">
                <div class="qr-code" id="deviceQRCode">
                    <!-- 这里将通过JavaScript动态生成二维码 -->
                </div>
                <p class="qr-tip">请使用设备端APP扫描此二维码进行自动配对</p>
            </div>
            <div class="modal-actions">
                <button type="button" class="action-btn" onclick="hideAddDeviceModal()">关闭</button>
            </div>
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div id="deleteConfirmModal" class="confirm-modal">
        <div class="confirm-content">
            <h3 class="confirm-title">删除设备</h3>
            <p class="confirm-message">确定要删除设备 "<span id="deviceName"></span>" 吗？此操作不可恢复。</p>
            <div class="confirm-actions">
                <button class="confirm-btn confirm-cancel" onclick="hideDeleteConfirm()">取消</button>
                <button class="confirm-btn confirm-delete" onclick="confirmDelete()">确认删除</button>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/qrcode.js/qrcode.min.js"></script>
    <script>
        let ws;
        let currentPairingCode;
        let deviceToDelete = null;
        
        function showAddDeviceModal() {
            const modal = document.getElementById('addDeviceModal');
            modal.style.display = 'flex';
            modal.querySelector('.modal-content').style.transform = 'translateY(0)';
            
            // 生成临时配对码并创建二维码
            currentPairingCode = generatePairingCode();
            generateQRCode(currentPairingCode);
            
            // 建立WebSocket连接等待配对
            initWebSocket();
        }

        function hideAddDeviceModal() {
            const modal = document.getElementById('addDeviceModal');
            modal.querySelector('.modal-content').style.transform = 'translateY(20px)';
            setTimeout(() => {
                modal.style.display = 'none';
            }, 300);
            
            // 关闭WebSocket连接
            if(ws) {
                ws.close();
            }
        }

        function generatePairingCode() {
            // 生成32位随机配对码
            return Array.from(crypto.getRandomValues(new Uint8Array(16)))
                .map(b => b.toString(16).padStart(2, '0'))
                .join('');
        }

        function generateQRCode(pairingCode) {
            const qrContainer = document.getElementById('deviceQRCode');
            qrContainer.innerHTML = '';
            
            // 创建二维码数据对象
            const qrData = {
                type: 'device_pairing',
                pairingCode: pairingCode,
                timestamp: Date.now(),
                serverUrl: `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/pair`
            };

            // 使用qrcode.js生成二维码
            new QRCode(qrContainer, {
                text: JSON.stringify(qrData),
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }

        function initWebSocket() {
            // 关闭已存在的连接
            if(ws) {
                ws.close();
            }

            // 建立新的WebSocket连接
            ws = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/pair`);
            
            ws.onopen = () => {
                console.log('WebSocket连接已建立');
                // 发送配对码到服务器
                ws.send(JSON.stringify({
                    type: 'init_pairing',
                    pairingCode: currentPairingCode
                }));
            };
            
            ws.onmessage = (event) => {
                const data = JSON.parse(event.data);
                
                if(data.type === 'pairing_success') {
                    // 配对成功
                    alert('设备配对成功！');
                    hideAddDeviceModal();
                    // 刷新设备列表
                    location.reload();
                } else if(data.type === 'pairing_error') {
                    // 配对失败
                    alert(`配对失败: ${data.message}`);
                    hideAddDeviceModal();
                }
            };
            
            ws.onerror = (error) => {
                console.error('WebSocket错误:', error);
                alert('连接错误，请重试');
                hideAddDeviceModal();
            };
            
            ws.onclose = () => {
                console.log('WebSocket连接已关闭');
            };
        }

        function controlDevice(deviceId) {
            // 处理远程控制设备的逻辑
            alert('正在连接设备...');
        }

        function showDeleteConfirm(deviceId, deviceName) {
            deviceToDelete = deviceId;
            document.getElementById('deviceName').textContent = deviceName;
            document.getElementById('deleteConfirmModal').style.display = 'flex';
        }

        function hideDeleteConfirm() {
            document.getElementById('deleteConfirmModal').style.display = 'none';
            deviceToDelete = null;
        }

        function confirmDelete() {
            if(deviceToDelete === null) return;
            
            fetch(`/api/devices/${deviceToDelete}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    hideDeleteConfirm();
                    location.reload();
                } else {
                    alert('删除失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('删除设备出错:', error);
                alert('删除失败，请重试');
            });
        }

        function pairDevice(deviceId) {
            showAddDeviceModal();
        }
    </script>
</body>
</html>
